<template>
	<view class="home">
		<view class="topnav">
			<u-tabs :list="navlist" :activeStyle="{
				color: '#333',
				fontWeight: 'bold',
				transform: 'scale(1.08)'
			}" :inactiveStyle="{
				color: '#888',
				transform: 'scale(1)'
			}" @click="clickNav"></u-tabs>
		</view>

		<view class="loadingState" v-show="loadState">
			<u-skeleton rows="4" title loading></u-skeleton>
		</view>
		<view class="content">
			<view class="item" v-for="item in dataList" :key="item.id">
				<blog-item @delEvent="P_delEvent" :item="item" :isLike.sync="item.isLike"
					:like_count.sync="item.like_count"></blog-item>
			</view>
		</view>

		<view>
			<uni-load-more :status="uniLoad"></uni-load-more>
		</view>

		<view class="add" @click="goAdd">
			<text class="iconfont icon-add-select"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uniLoad: "more",
				noMore: false,
				navlist: [{
						name: "最新",
						type: "publish_date"
					},
					{
						name: "热门",
						type: "view_count"
					}
				],
				dataList: [],
				navAction: 0,
				loadState: true
			}
		},
		onLoad() {
			this.getData();
		},
		//触底加载更多
		onReachBottom() {
			this.uniLoad = 'loading'
			if (this.noMore) return this.uniLoad = "noMore";
			this.getData();
		},
		methods: {
			P_delEvent() {
				this.dataList = [];
				this.getData();
			},

			//获取网络列表
			getData() {
				uni.request({
					url: `${this.$baseUrl}/api.php?action=getList&pagesize=10&page=1`,
					method: "GET",
					success: (res) => {
						this.loadState = false
						if (res.data != undefined && res.data != '') {
							this.dataList = JSON.parse(JSON.stringify(res.data))
							this.dataList.map(item => {
								item.picurls.map(pic => {
									return pic.replace(/\\/g, '')
								})
								return item
							})
						}
					},
					fail: (err) => {
						console.log(err.errMsg);
					}
				})
			},

			clickNav(e) {
				this.loadState = true;
				this.dataList = [];
				this.uniLoad = "more"
				this.navAction = e.index;
				this.noMore = false
				this.getData();
			},

			//跳转至编辑页面
			goAdd() {
				uni.navigateTo({
					url: "/pages/add/add"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.topnav {
			margin-bottom: 30rpx;
		}

		.loadingState {
			padding: 30rpx;
		}

		.content {
			.item {
				padding: 30rpx;
				border-bottom: #F7F7F7 15rpx solid
			}
		}

		.add {
			width: 120rpx;
			height: 120rpx;
			background: #0199FE;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);

			.iconfont {
				font-size: 50rpx;
			}
		}
	}
</style>